<template>
    <div :class="newsHotItemImg.content">
      <template v-if="content.content.cover">
        <a :href="content.content.source_link" :style="{'background-image': 'url('+content.content.cover+')'}">
          <p :class="newsHotItemImg.title">{{content.content.title}}</p>
          <div :class="newsHotItemImg.box">
            <span>热门报告</span>
            <span :class="newsHotItemImg.time">{{content.content.date | time}}</span>
            <span :class="newsHotItemImg.source">{{content.content.source}}</span>
          </div>
          <div :class="newsHotItemImg.mark"></div>
        </a>
      </template>
      <template v-else>
        <a :href="content.content.source_link" :style="{'background-image': 'url('+url+')'}">
          <p :class="newsHotItemImg.title">{{content.content.title}}</p>
          <div :class="newsHotItemImg.mark"></div>
          <div :class="newsHotItemImg.box">
            <span>热门报告</span>
            <span :class="newsHotItemImg.time">{{content.content.date | time}}</span>
            <span :class="newsHotItemImg.source">{{content.content.source}}</span>
          </div>
        </a>
      </template>
    </div>
</template>

<script>
  export default {
    name: 'hot',
    props: {
      content: {
        required: true
      }
    },
    data () {
      return {
        url: require('../../assets/images/list-default.png')
      }
    }
  }
</script>

<style lang="scss" module="newsHotItemImg">
.content{
  padding: 20px 18px;
  border-right: 1px solid #f0f0f0;
  >a{
    display: block;
    width:100%;
    height: 120px;
    position: relative;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: repeat-y;
    z-index: 0;
  }
  .note{

  }
  .title{
    color: #fff;
    font-size:18px;
    text-align: left;
    position: absolute;
    width:100%;
    left:0;
    top: 45px;
    z-index:2;
    padding:0 8px;
    &:hover{
      color: #3dab85;
    }
  }
  .mark{
    width: 100%;
    height: 120px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(-180deg,rgba(0,0,0,.18),rgba(0,0,0,.8) 95%)
  }
  .time{
    font-size: 12px;
    color: #aaa;
  }
  .source{
    margin-left: 16px;
    font-size: 12px;
    color: #aaa;
    position: relative;
    &:before{
      content: "";
      position: absolute;
      height: 12px;
      top: 50%;
      left: -8px;
      width: 1px;
      background: #aaa;
      transform: translateY(-50%);
    }
  }
  .box{
    position: absolute;
    left:8px;
    bottom:12px;
    z-index:5;
    span{
      font-size: 12px;
      color: #aaa;
    }
  }
}
</style>
